<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>tbplas-管理系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="./img/logo.png" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="../css/element.css">
    <link rel="stylesheet" type="text/css" href="../css/tbplas_user.css">
    <script src="../js/vue.js"></script>
    <script src="../js/axios.js"></script>
    <script src="../js/element.js"></script>
    <script src="../router.js"></script>
    <style>
        .el-pagination .el-pager li {
            padding: 0;
        }
    </style>
</head>

<body>
    <div id="app" class="app-container">
        <div class="table-card">
            <div class="table-header">
                <h2 class="table-title">TBPLaS Total number of users：{{totalUsers}}</h2>
            </div>
            <div class="responsive-table-container">
                <el-table v-loading="loading" :data="filteredUsers" style="width: 100%" v-loading="loading"
                    element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
                    element-loading-background="rgba(0, 0, 0, 0.8)" element-loading-background="transparent"
                    :element-loading-text="loadingText">
                    <el-table-column prop="name" label="姓名">
                        <template slot-scope="scope">
                            <el-tooltip effect="dark" :content="scope.row.name" placement="top">
                                <div style="font-weight: 500;">{{ scope.row.name }}</div>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column prop="email" label="邮箱">
                        <template slot-scope="scope">
                            <el-tooltip effect="dark" :content="scope.row.email" placement="top">
                                <div class="email-cell">
                                    <i class="el-icon-message"></i>
                                    <a :href="'mailto:' + scope.row.email"
                                        style="color: var(--accent-color); text-decoration: none;">{{ scope.row.email
                                        }}</a>
                                </div>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column prop="organization" label="工作单位">
                        <template slot-scope="scope">
                            <el-tooltip effect="dark" :content="scope.row.organization" placement="top">
                                <div class="organization-cell">
                                    <i class="el-icon-office-building"></i>
                                    <span>{{ scope.row.organization }}</span>
                                </div>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column prop="researchField" label="研究领域">
                        <template slot-scope="scope">
                            <el-tooltip effect="dark" :content="scope.row.researchField" placement="top">
                                <el-tag type="success" effect="dark">
                                    {{ scope.row.researchField.length > 10
                                    ? scope.row.researchField.slice(0, 10) + '...'
                                    : scope.row.researchField }}
                                </el-tag>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createdAt" label="注册日期" sortable>
                        <template slot-scope="scope">
                            <el-tooltip effect="dark" :content="scope.row.createdAt" placement="top">
                                <div>{{scope.row.createdAt}}</div>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <!-- <div v-if="!loading && filteredUsers.length === 0" class="no-data">
                <i class="el-icon-warning-outline" style="font-size: 3rem; color: var(--accent-color);"></i>
                <p style="margin-top: 20px; font-size: 1.2rem;">未找到相关科研人员信息</p>
            </div> -->

            <!-- <div v-if="filteredUsers.length > 0" class="pagination-container">
                <el-pagination background layout="prev, pager, next" :page-size="pageSize" :total="totalUsers"
                    :current-page="currentPage" @current-change="handlePageChange"></el-pagination>
            </div> -->
            <div class="pagination-container">
                <el-pagination background layout="prev, pager, next" :page-size="pageSize" :total="totalUsers"
                    :current-page="currentPage" @current-change="handlePageChange"></el-pagination>
            </div>
        </div>

        <div style="text-align: center; padding: 30px; color: var(--text-secondary);">
            <p>© 2025 Tbplas</p>
        </div>
    </div>

    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    token: {},
                    users: [],
                    searchQuery: '',
                    loading: true,
                    currentPage: 1,
                    pageSize: 10,
                    totalUsers: 0,
                    loadingText: '正在加载科研数据...',
                    fakeData: [
                        {
                            "id": 1,
                            "name": "张教授",
                            "email": "zhang@uni.edu.cn",
                            "organization": "清华大学人工智能研究院",
                            "researchField": "人工智能",
                            "createdAt": "2025-06-10"
                        },
                        {
                            "id": 2,
                            "name": "李博士",
                            "email": "li@science.ac.cn",
                            "organization": "中科院生物物理研究所",
                            "researchField": "结构生物学",
                            "createdAt": "2025-05-28"
                        },
                        {
                            "id": 3,
                            "name": "王研究员",
                            "email": "wang@nano-tech.cn",
                            "organization": "北京大学纳米技术中心",
                            "researchField": "纳米材料",
                            "createdAt": "2025-04-15"
                        },
                        {
                            "id": 4,
                            "name": "陈教授",
                            "email": "chen@quantum.cn",
                            "organization": "中国科技大学",
                            "researchField": "量子计算",
                            "createdAt": "2025-03-22"
                        },
                        {
                            "id": 5,
                            "name": "刘博士",
                            "email": "liu@space.org.cn",
                            "organization": "国家航天局空间科学中心",
                            "researchField": "空间探测",
                            "createdAt": "2025-02-18"
                        },
                        {
                            "id": 6,
                            "name": "赵院士",
                            "email": "zhao@biomed.org",
                            "organization": "上海生命科学研究院",
                            "researchField": "基因编辑",
                            "createdAt": "2025-01-05"
                        },
                        {
                            "id": 7,
                            "name": "孙教授",
                            "email": "sun@climate.edu.cn",
                            "organization": "南京大学气候研究所",
                            "researchField": "气候变化",
                            "createdAt": "2024-12-20"
                        },
                        {
                            "id": 8,
                            "name": "郑研究员",
                            "email": "zheng@energy.gov",
                            "organization": "国家能源重点实验室",
                            "researchField": "清洁能源",
                            "createdAt": "2024-11-15"
                        }
                    ]
                };
            },
            computed: {
                filteredUsers() {
                    const search = this.searchQuery.toLowerCase();
                    if (!search) {
                        return this.users;
                    }
                    return this.users.filter(user =>
                        (user.name && user.name.toLowerCase().includes(search)) ||
                        (user.email && user.email.toLowerCase().includes(search)) ||
                        (user.organization && user.organization.toLowerCase().includes(search)) ||
                        (user.researchField && user.researchField.toLowerCase().includes(search))
                    );
                }
            },
            mounted() {
                // 模拟数据加载过程
                // this.loadData();

                // 实际使用时应调用此方法
                this.token = JSON.parse(storage.get(loginKey))
                this.fetchUserData();
            },
            methods: {
                fetchUserData() {
                    this.loading = true;
                    // https://www.tbplas.net/api_tbplas_1749021606379/queryUser
                    axios.get(api + '/queryUser', {
                        params: {
                            currentPage: this.currentPage
                        }, headers: {
                            Authorization: `Bearer ${this.token.token}` // 或者其他格式，比如 'token': yourToken
                        }
                    })
                        .then(response => {
                            if (response.data.code === 200) {
                                const data = response.data.data;
                                this.users = data.list;
                                this.totalUsers = data.pagination.total;
                                this.currentPage = data.pagination.currentPage;
                                this.pageSize = data.pagination.pageSize;
                            }
                            this.loading = false;
                        })
                        .catch(error => {
                            console.error('获取用户数据失败:', error);
                            this.loading = false;
                            this.$message.error(error.response.data.msg);
                            errorLog('forgot-password', error)
                        });
                },
                loadData() {
                    // 模拟数据加载效果
                    setTimeout(() => {
                        this.users = this.fakeData;
                        this.totalUsers = 8;
                        this.currentPage = 1;
                        this.loading = false;
                    }, 1500);
                },
                handlePageChange(page) {
                    this.currentPage = page;
                    // 在实际应用中，这里会重新获取对应页面的数据
                    this.fetchUserData();

                    // 模拟翻页效果
                    this.loading = true;
                    setTimeout(() => {
                        this.loading = false;
                    }, 500);
                }
            }
        });
    </script>
</body>

</html>